<!--本Demo登陆测试帐号：easemob-demo1，密码：1, 测试账号：easemob-demo2，密码：1-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <title>环信测试demo</title>

    <script src="utils/WebIMConfig.js"></script>
    <script src="js/websdk3.1.4.js"></script>
    <script src="js/EMedia_x1v1.js"></script>

    <script src="utils/jquery-3.4.1.js"></script>
    <!-- 引入IM 初始化文件÷-->
    <script src="utils/initWeb.js"></script>
    <script src="easmeob-im/login.js"></script>
    <script src="easmeob-im/message.js"></script>
    <script src="easmeob-im/friend.js"></script>
    <script src="easmeob-im/group.js"></script>
    <script src="easmeob-im/chatroom.js"></script>
    <script src="easmeob-im/webrtc.js"></script>
    <script src="easmeob-im/confrence.js"></script>

</head>

<body>
<div>
    用户名：<input type="text" id="name">
    用户密码：<input type="password" id="pwd"><br>
    接收方ID：<input type="text" id="toName">
    消息内容：<input type="text" id="msg"><br>
    消息ID：<input type="text" id="msgId">
    群组ID：<input type="text " id="groupId"><br>
    Cursor：<input type="text" id="gCursor">
    群文件ID：<input type="text" id="gFileId"><br>
    群组类型：<input type="text" id="gType">
    聊天室类型：<input type="text" id="rType"><br>
    会议ID：<input type="text" id="confrenceId">
    会议密码：<input type="text" id="confrencePwd">
</div>

<h3>Registered login</h3>
<div>
    <button id="register">注册</button>
    <button id="login">登陆</button>
    <button id="logout">退出</button>
</div>
<h3>Message</h3>
<div>
    <button id="privateText">发送文本</button>
    <button id="privateCmd">发送透传</button>
    <button id="privateLoc">发送位置</button>
    <button id="privateUrlImg">Url图片消息</button>
    <button id="recallMsg">撤回消息</button>
    <button id="getHistory">拉取历史消息</button>
    <br> image:
    <input type="file" id="imgMsg">
    <button id="privateImg">发送图片</button>
    <br> audio:
    <input type="file" id="audioMsg">
    <button id="privateAudio">发送音频</button>
    <br> video:
    <input type="file" id="videoMsg">
    <button id="privateVideo">发送视频</button>
    <br>file:
    <input type="file" id="fileMsg">
    <button id="privateFile">发送附件</button>
    <br><br>
    <video id="getVideo" style="border: 1px solid red" autoplay></video>
</div>
<h3>Roster</h3>
<div>
    <button id="getRoasters">获取好友</button>
    <button id="addRoster">添加好友</button>
    <button id="removeRoster">删除好友</button>
    <button id="getBlackList">获取黑名单列表</button>
    <button id="addBlackList">加入黑名单</button>
    <button id="removeFromBlackList">移除黑名单</button>
</div>
<h3>Group</h3>
<div>
    <button id="getGroupList">获取已加入的群组列表</button>
    <button id="getPubGroupList">分页获取群组</button>
    <button id="createGroups">创建群组</button>
    <button id="getGroupInfo">获取群组详情</button>
    <button id="putGroupInfo">修改群组信息</button>
    <button id="getGroupMember">获取群组成员</button>
    <button id="inviteGroupMember">将好友加入群组</button>
    <button id="removeGroupMember">移除群组成员</button>
    <button id="quitGroup">退出群组</button>
    <button id="disGroup">解散群组</button>
    <button id="getGroupAdmin">获取群组管理员</button>
    <button id="setGroupAdmin">设置群组管理员</button>
    <button id="removeGroupAdmin">移除群组管理员</button>
    <button id="applyJoinGroup">申请加入群组</button>
    <button id="getMuteGroupList">获取群组禁言列表</button>
    <button id="setMuteGroupMember">将成员禁言</button>
    <button id="removeMuteGroupMember">移除禁言</button>
    <button id="setMuteAll">全员禁言</button>
    <button id="removeMuteAll">解除全员禁言</button>
    <button id="getGroupWhite">获取群组白名单</button>
    <button id="setGroupWhite">将成员加入白名单</button>
    <button id="removeGroupWhite">将成员移除白名单</button>
    <button id="getGroupMemberWhite">查询白名单用户</button>
    <button id="getGroupBlack">获取群组黑名单</button>
    <button id="setGroupBlack">将成员加入黑名单</button>
    <button id="removeGroupBlack">将成员移除黑名单</button>
    <button id="putAnnouncement">修改/上传群公告</button>
    <button id="getAnnouncement">获取群公告</button>
    <button id="getGroupFile">查询群文件</button>
    <button id="setGroupFile">上传群文件</button>
    <button id="downGroupFile">下载群文件</button>
    <button id="removeGroupFile">删除群文件</button>
</div>
<h3>Chatrooms</h3>
<div>
    <button id="getRoomsList">获取聊天室列表</button>
    <button id="getRoomsMember">获取聊天室成员</button>
    <button id="joinRoom">加入聊天室</button>
    <button id="quitRoom">退出聊天室</button>
    <button id="setRoomAnnouncement">上传聊天室公告</button>
    <button id="getRoomAnnouncement">获取聊天室公告</button>
    <button id="setRoomMute">将成员禁言</button>
    <button id="removeRoomMute">移除禁言</button>
    <button id="getRoomMuteList">获取禁言列表</button>
    <button id="setMuteAll">全员禁言</button>
    <button id="removeMuteAll">解除全员禁言</button>
    <button id="setRoomWhite">将成员加入白名单</button>
    <button id="removeRoomWhite">将成员移除白名单</button>
    <button id="getRoomWhiteList">获取白名单列表</button>
    <button id="getRoomMemberWhite">查询白名单</button>
    <button id="getRoomBlack">获取黑名单列表</button>
    <button id="setRoomBlack">将成员加入黑名单</button>
    <button id="removeRoomBlack">将成员移除黑名单</button>
</div>
<h3>WebRTC</h3>
<div>
    <button id="rtCall">视频呼叫</button>
    <button id="rtEndCall"> 挂断</button>
    <button id="rtAudioCall">音频呼叫</button>
    <br><br>
</div>
<h3>Confer</h3>
<div>
    <button id="createConfr">创建会议</button>
    <button id="inviteUser">邀请用户</button>
    <button id="cancelPushSteam">取消发布流</button>
    <button id="cancelStream">取消订阅流</button>
    <button id="subscriStream">订阅成员流</button>
    <button id="pushDeskStream">共享桌面</button>
    <button id="pauseMeVideo">暂停自己视频</button>
    <button id="resumeMeVideo">恢复自己视频</button>
    <button id="pauseMeAudio">暂停自己音频</button>
    <button id="resumeMeAudio">恢复自己音频</button>
    <button id="resumeAudio">仅订阅音频</button>
    <button id="pauseAudio">仅暂停订阅音频</button>
    <button id="resumeVideo">仅订阅视频</button>
    <button id="pauseVideo">仅暂停订阅视频</button>
    <button id="removeUser">移除成员</button>
    <button id="exitConfr">离开会议</button>
    <button id="destroyConfr">销毁会议</button>
    <button id="joinConfrence">根据ID/密码加入会议</button>

</div>
<div>
    <video id="meVideo" style="border: 1px solid red; width: 300px; height: 200px; " muted=true autoplay>
    </video>
    <video id="youVideo" style="border: 1px solid blue ;  width: 300px; height: 200px; " autoplay>
    </video>
    <video id="deskVideo" style="border: 1px solid black ;  width: 300px; height: 200px; " autoplay></video>
</div>
<script>
    var uname,          //登陆ID
        upwd,           //登陆密码
        msgContent,     //消息内容
        toID,           //接收方ID，好友/群组 相关操作ID
        mid,            //消息ID
        cursor,         //分页获取群组的的 cursor
        gid,            //群组ID
        gFileId,        //群文件ID
        gType,          //判断群组类型
        roomType,       //判断聊天室类型
        userMember,     //member 成员信息
        userStream,     //用于接收用户视频流
        confrenceId,    //会议ID，用于直接加入
        confrencePwd    //会议密码，用于直接加入
    //获取 name 值
    $("#name").bind("input propertychange", function (event) {
        uname = $("#name").val()
    });
    //获取 pwd 值
    $("#pwd").bind("input propertychange", function (event) {
        upwd = $("#pwd").val()
    });
    //获取 msgContent 值
    $("#msg").bind("input propertychange", function (event) {
        msgContent = $("#msg").val()
    });
    //获取 toID 值
    $("#toName").bind("input propertychange", function (event) {
        toID = $("#toName").val()
    });
    //获取 msgId 值
    $('#msgId').bind("input propertychange", function (event) {
        mid = $("#msgId").val()
    })
    //获取 groupId 值
    $('#groupId').bind("input propertychange", function (event) {
        gid = $("#groupId").val()
    })
    //获取 gCursor 值
    $('#gCursor').bind("input propertychange", function (event) {
        cursor = $("#gCursor").val()
    })
    //获取 gFileId 值
    $('#gFileId').bind("input propertychange", function (event) {
        gFileId = $("#gFileId").val()
    })
    //获取 gType 值
    $('#gType').bind("input propertychange", function (event) {
        gType = $("#gType").val()
    })
    //获取 rType 值
    $('#rType').bind("input propertychange", function (event) {
        roomType = $("#rType").val()
    })
    // 获取 confrenceId 值
    $('#confrenceId').bind("input propertychange", function (event) {
        confrenceId = $("#confrenceId").val()
    })
    //获取 confrencePwd 值
    $('#confrencePwd').bind("input propertychange", function (event) {
        confrencePwd = $("#confrencePwd").val()
    })

</script>

</body>

</html>